<template>
  <div class="page-content">
    <!-- letTable高级组件 -->
    <LetTable
      :listData="dataList"
      :listCount="dataCount"
      v-bind="contentTableConfig"
      v-model:page="pageInfo"
    >
      <!-- //标题-->
      <!-- header2插槽 -->
      <template #header2>
        <el-button @click="handleNewClick">{{
          contentTableConfig.handleUser
        }}</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </template>

      <template #enable="scope">
        <el-button
          size="mini"
          :type="scope.row.enable ? 'success' : 'danger'"
          plain
          >{{ scope.row.enable ? "启用" : "禁用" }}</el-button
        >
      </template>
      <template #createAt="scope" size="mini">{{
        $filters.formatTime(scope.row.createAt)
      }}</template>
      <template #updateAt="scope" size="mini">{{
        $filters.formatTime(scope.row.updateAt)
      }}</template>

      <template #handler="scope">
        <div class="btn">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEditClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteClick(scope.row)"
            >删除</el-button
          >
        </div>
      </template>

      <template #footer></template>

      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </LetTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from "vue";
import LetTable from "@/base-ui/table";
import { useStore } from "vuex";

export default defineComponent({
  props: {
    contentTableConfig: {
      type: Object,
      require: true,
      handleUser: {
        type: Object,
      },
    },
    pageName: {
      type: String,
      required: true,
    },
  },
  components: {
    LetTable,
  },
  emits: ["newBtnClick", "editBtnClick"],
  setup(props, { emit }) {
    const store = useStore();
    // 1.双向绑定pageInfo
    const pageInfo = ref({ currentPage: 0, pageSize: 10 });
    watch(pageInfo, () => getPageData());
    //提交数据到actions
    const getPageData = (queryInfo: any = {}) => {
      store.dispatch("system/getPageListAction", {
        pageName: props.pageName,
        queryInfo: {
          offset: pageInfo.value.currentPage * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo,
        },
      });
    };
    //调用getPageData
    getPageData();

    //用户列表信息
    const dataList = computed(() =>
      store.getters[`system/PageListData`](props.pageName)
    );
    const dataCount = computed(() =>
      store.getters[`system/PageListCount`](props.pageName)
    );
    //获取其他用户插槽
    const otherPropSlots = props.contentTableConfig?.propList.filter(
      (item: any) => {
        if (item.slotName === "status") return false;
        if (item.slotName === "createAt") return false;
        if (item.slotName === "updateAt") return false;
        if (item.slotName === "handler") return false;
        return true;
      }
    );
    // 5.删除 编辑 新建
    const handleDeleteClick = (item: any) => {
      console.log(item);
      store.dispatch("system/deletePageDataActions", {
        pageName: props.pageName,
        id: item.id,
      });
    };
    const handleNewClick = () => {
      emit("newBtnClick");
    };
    const handleEditClick = (item: any) => {
      emit("editBtnClick", item);
    };

    return {
      dataList,
      dataCount,
      getPageData,
      pageInfo,
      otherPropSlots,
      handleDeleteClick,
      handleNewClick,
      handleEditClick,
    };
  },
});
</script>

<style scoped lang="less"></style>
